@import url('../../utils/less/base.less');

.page {
    &>.header {
        .sticky(tl);
        .bgcolor(#f5f5f5);
        padding: 28rpx 32rpx 20rpx;
        &>.searchRow {
            .bgcolor(white);
            .radius(100rpx);
            .flex-start(center);
            height: 80rpx;
            box-shadow: 0 0 20rpx -12rpx #333;
            // &>.title {
            //     .text(30rpx);
            //     .flex(none);
            //     margin-left: 30rpx;
            // }
            &>.search-input {
                .text(30rpx);
                .flex(auto);
                margin: 0 30rpx;
            }
        }
    }
    &>.list {
        .flex-between(wrap);
        padding: 0 32rpx;
        &>.item {
            .bgcolor(white);
            .radius(10rpx);
            .overflow-hidden();
            width: calc(50% - 16rpx);
            margin: 16rpx 0;
            &>.cover {
                .bgimg(cover);
                .flex-end(col);
                height: 250rpx;
                &>.tips {
                    // .bgcolor(rgba(0,0,0,.5));
                    .text(white, 24rpx);
                    .text-overflow(1);
                    padding: 12rpx 20rpx;
                    background: linear-gradient(rgba(0,0,0,0), #333);
                }
            }
            &>.info {
                .flex-between(col);
                padding: 20rpx;

                &>.title {
                    .text(30rpx);
                    .text-overflow(2);
                }

                &>.goodat {
                    .text(#555);
                    .text-overflow(2);
                    margin-top: 10rpx;
                }

                &>.tag {
                    .flex-start(center, wrap);
                    margin-top: 4rpx;
                    &>.tagitem {
                        .bgcolor(#e0a502);
                        .text(white, 24rpx);
                        .flex(none);
                        .radius(6rpx);
                        padding: 4rpx 8rpx;
                        margin: 6rpx;
                    }
                }

                &>.price {
                    .flex-start(baseline);
                    .text(#ff2600, 32rpx, bold);
                    margin-top: 4rpx;
                    &>.cycle {
                        .text(24rpx, #999, lighter, deline);
                        margin-left: 16rpx;
                    }
                }
            }
        }
    }
    &>.list-status {
        .text(center, #999);
        padding-top: 20rpx;
    }
}